<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Touch event test</title>
  <style>
    #stage
    {
      width: 800px;
      height: 800px;
      background-color: red;
      touch-action: none;
    }
    body
    {
      width: 100%;
      height: 600px;
      background-color: yellow;
    }
  </style>
  <script>
    function init()
    {
      var div = document.getElementById('stage');
      /*
      div.addEventListener('touchstart', function(e){
        console.log('touchstart', e.type, e.target);
      });
      div.addEventListener('touchend', function(e){
        console.log('touchend', e.type, e.target);
      });
      var body = document.body;
      body.addEventListener('touchstart', function(e){
        console.log('body touchstart', e.type, e.target);
      });
      body.addEventListener('touchend', function(e){
        console.log('body touchend', e.type, e.target);
      });
      */

      div.addEventListener('pointerdown', e => { console.log('pointerdown'); });
      div.addEventListener('pointerup', e => { console.log('pointerup'); });
      div.addEventListener('pointermove', e => { console.log('pointermove'); });
      div.addEventListener('pointerhold', e => { console.log('pointerhold'); });
      div.addEventListener('pointerleave', e => { console.log('pointerleave'); });
    }
  </script>
</head>
<body onload="init()">
  <div id="stage"></div>
</body>
</html>